<template>
	<view class='container bg-w'>
		<view class="header uni-flex uni-row flex-between">
			<uni-nav-bar title="维护详情">
				<template slot='left'>
					<view class="flex width-100">
						<i class='iconfont iconfanhui' @click='goBack()'></i>
					</view>
				</template>
			</uni-nav-bar>
		</view>
		<view class="position-r-top">
			<view class="main">
				<uni-list>
					<view>
						<view class="uni-list">
							<view class="form-list flex flex-between height-50 border-bottom uni-list-cell-navigate uni-navigate-right">
								<text class="color-6 ">测点名称</text>
								<text style="color: #666;">{{params.gaugingPoint}}</text>
							</view>
							<!-- <view class="form-list flex flex-between height-50 border-bottom uni-list-cell-navigate uni-navigate-right">
								<text class="color-6 ">设备ID</text>
								<text style="color: #666;">{{whMaintainProject.equipmentId}}</text>
							</view> -->
							<view class="form-list flex flex-between height-50 border-bottom uni-list-cell-navigate uni-navigate-right">
								<text class="color-6 ">测点位置</text>
								<text style="color: #09AAE9;" @click="handleEGPS">导航</text>
							</view>
							<view v-for="(item,index) in whMaintainProject.zdhjcSubMaintainPoints" :key="index" >
								<view class="form-list flex flex-between height-50 border-bottom uni-list-cell-navigate uni-navigate-right">
									<text class="color-6 wid-80" style="overflow: hidden;">{{item.subMaintainName}}</text>
									<input type="text" :disabled="true" v-model="item.maintenance" />
								</view>
								<view class="form-list flex flex-between height-50 border-bottom uni-list-cell-navigate uni-navigate-right">
									<text class="color-6 wid-80" style="overflow: hidden;">{{item.subMaintainRequirement}}</text>
								</view>
							</view>
							<view class="form-list flex flex-between height-50 border-bottom">
								<text class="color-6 ">备注</text>
								<input type="text" :disabled="true" v-model="whMaintainProject.remark" />
							</view>
							<view class="photograph">
								<view class="photograph-list">
									<view class="flex flex-between height-50 margin-b-10">
										<text>照片</text>
									</view>
									<view class="photo-list flex flex-between">
										<view class="img_box" v-for="(imgItem,imgIndex) in whMaintainProject.zdhjcMaintainPointFiles" :key="imgIndex">
											<image :src="imgItem.imgUrl" mode="" @click="previewImg(imgIndex,imgItem)"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</uni-list>
			</view>
			<uni-popup ref="imgpopup" type="center">
				<view class="popup-view">
					<view class="popup-imgAll">
						<!-- <image :style="{'width': imgW,'height': imgH}" :src="imgUrl" @touchstart="start" @touchend="end" @click="closeImg"></image> -->
						<image :style="{'width': imgW,'height': imgH}" :src="imgUrl"  @click="closeImg"></image>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {getFileInfo} from '@/common/api/api'
	import {getDetail} from "@/common/api/map"
	import ipConfig from '@/utils/ipConfig.js'
	export default {
		data() {
			return {
				whMaintainProject:{
          zdhjcMaintainPointFiles:[],
          zdhjcSubMaintainPoints:[]
        },
				previewImageAll:[],
				clientX:0,
				clientY:0,
				imgUrl:'',
				imgIndex:0,
				hideVideo:false,
				imgH:null,
				imgW:null,
				screenWidth:null,
				screenHeight:null,
			}
		},
		onLoad(params) {
			this.screenWidth = uni.getSystemInfoSync().screenWidth
			this.screenHeight = uni.getSystemInfoSync().screenHeight
			this.params = params
			this.loadChildData();
		},
		methods: {
			loadChildData(){
				getDetail(this.params.standardProId, this.params.subPorjectId, this.params.maintainTaskId).then(res=>{
					if(res.data){
						this.whMaintainProject=res.data[0];
						this.whMaintainProject.zdhjcMaintainPointFiles.forEach((obj)=>{
							getFileInfo(obj.fileId).then(res => {
								let imgUrl = 'data:application/force-download;base64,' + uni.arrayBufferToBase64(res);
								this.$set(obj, 'imgUrl', imgUrl);
							})
						})
					}
				})
			},
			// 导航
			handleEGPS(){
				uni.openLocation({
				    latitude: Number(this.whMaintainProject.latitude),
				    longitude: Number(this.whMaintainProject.longitude),
				});
			},
			calculate(w, h, pw, ph) {	//canvas图片自适应居中
				let px = 0;
				let py = 0;
				if(pw < w && ph < h){
						px = 0.5 * w - 0.5 * pw;
						py = 0.5 * h - 0.5 * ph;
				}else if (ph / pw > h / w) {
						let uu = ph;
						ph = h
						pw = pw * h / uu
						px = 0.5 * w - 0.5 * pw;
				} else {
						let uu = pw;
						pw = w;
						ph = ph * pw / uu
						py = 0.5 * h - 0.5 * ph;
				}
				return {px, py, pw, ph}
			},
			// 预览图片
			previewImg(imgIndex,item) {
				// // let urls = this.whMaintainProject.maintainPointFiles.filter(item => !item.type).map(item => item.imgUrl);
				// uni.previewImage({
				// 	current:imgIndex,
				// 	urls:urls
				// })
				this.imgUrl = '';
				this.$refs.imgpopup.open();
				this.hideVideo = true
				this.whMaintainProject.zdhjcMaintainPointFiles.forEach((obj,index) => {
					if(item.fileId == obj.fileId){
						uni.getImageInfo({
							src: ipConfig.ip + 'admin/sys-file/getFileById?id='+item.fileId,
							success: (e) => {
								let imgInfo = this.calculate(this.screenWidth,this.screenHeight-50,e.width,e.height);
								this.imgH = imgInfo.ph+'px';
								this.imgW = imgInfo.pw+'px';
								this.imgUrl = item.imgUrl
							}
						});
					}
				})
			},
			closeImg(){
				this.hideVideo = false
				this.$refs.imgpopup.close();
			},
		}
	}
</script>

<style lang="less" scoped>
	.main {
		height: 100%;
		flex: 1;
		padding-bottom: 106rpx;
		overflow: scroll;
	}
	.form-list,.photograph {
		padding: 0 3%;
		background-color: #fff;
	}
	uni-input {
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
		font-size: 28rpx;
		min-width: 60%;
		max-width: 80%;
		color: #666 !important
	}
	/deep/uni-button:after {
		border: none;
		border-radius: none;
	}
	.img_box {
		width: 48%;
		position: relative;
	}
	/deep/.photograph .photo-list uni-image{
		width: 100% !important;
		height: 220rpx;
	
	}
	
	.photograph-list {
		color: #666;
	}
	
	.img_box uni-icon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}
	
	/deep/.img_box uni-icon .uni-icon-cancel {
		color: #fff;
	}
	.construction-footer {
		width: -webkit-fill-available;
		height: 100rpx;
		display: flex;
		position: fixed;
		bottom: 0;
	
		button {
			font-size: 28rpx;
			color: #fff;
			width: 50%;
			line-height: 100rpx;
			border-radius: 0;
		}
	
		button:first-child {
			background-color: #fff;
			color: #000;
			border-right: 1px solid #fff;
		}
	
		button:last-child {
			background-color: #09AAE9;
		}
	}
</style>
